<!DOCTYPE html>
<html>

<head>
    <style>
        /* 使其内部居中 */
        .contain {
            display: flex;
            /* flex-direction: column; */
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            background: #bfa;
        }

        /* 设置大小 */
        .contain {
            width: 500px;
            height: 500px;
        }

        .contain div {
            border: 1px solid #808080;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item {
            background: goldenrod;
            width: 25%;
            height: 25%;
        }
    </style>
</head>

<body>

    <div id="contain" class="contain blue">
        <div class="item "><span>1</span></div>
        <div class="item "><span>2</span></div>
        <div class="item "><span>3</span></div>
        <div class="item "><span>4</span></div>
        <div class="item "><span>5</span></div>
        <div class="item "><span>6</span></div>
        <div class="item "><span>7</span></div>
        <div class="item "><span>8</span></div>
        <div class="item "><span>9</span></div>
    </div>

</body>

</html>